<template>
  <el-drawer v-model="drawer">
    <!-- 头部部分 -->
    <template #header>
      <slot name="title"></slot>
    </template>
    <!-- 身体部分 -->
    <template #default>
      <slot name="content"></slot>
    </template>
    <!-- 底部部分 -->
    <template #footer>
      <div style="flex: auto">
        <el-button icon="Close" @click="cancel">取消</el-button>
        <el-button
          icon="Check"
          type="primary"
          :loading="loading"
          @click="submit"
          >确定</el-button
        >
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref } from "vue";
const drawer = ref<boolean>(false);
//定义触发事件,就是底部2个按钮
const emit = defineEmits(["submit", "cancel"]);
//抽屉的打开与关闭
const open = () => (drawer.value = true);
const close = () => (drawer.value = false);
// 抽屉的确认与取消按钮
const submit = () => emit("submit");
const cancel = () => emit("cancel");
let loading = ref(false);
//提交按钮的加载状态
const showloading = () => (loading.value = true);
const hideloading = () => (loading.value = false);
// 暴露出去
defineExpose({
  open,
  close,
  submit,
  cancel,
  showloading,
  hideloading,
});
</script>
<style lang="scss" scoped></style>
